import React, {Component} from 'react';

require('./css/frame.css');

export default class P24 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1, 0],
      flag: 'none',
    };
  }

  onSlider(i) {
    let index = [0, 0];
    index[i] = 1;
    this.setState({
      index
    });
  }

  onClick() {

  }

  render() {
    const {index, flag} = this.state;
    return (
      <div id="page">
        <div className="content" id="box24">
          <h4 className="title">舒适系统-应急操作</h4>

          {index[0] === 1 && <div className='box24Cont' id='box240'>
            <div className='infodiv'>当遭遇无法解锁/闭锁车门：</div>
            <img src={require('./img/24_0.jpg')} style={{marginTop: 0}}/>
            <ul>
              <li>钥匙遥控功能失效</li>
              <li>车辆的中控锁系统失效</li>
            </ul>
            <p style={{position:'absolute', left: 40,top:160}}>
              应急措施：<br></br>
              手动开启驾驶员侧车门锁时，仅开启驾驶员侧车门锁。
            </p>

          </div>}

          {index[1] === 1 && <div className='box24Cont' id='box241'>
            <div className='infodiv'>当遭遇无法起动爱车：</div>
            <img src={require('./img/24_1.jpg')} style={{marginTop: 40}}/>
            <ul>
              <li>钥匙电池没电； </li>
              <li>KESSY故障（非防盗）。</li>
            </ul>
          </div>}

          <div id="csld" className="sldcir" style={{left: 440}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}


